<template>
    <div class="icons-wrapper">
        <swiper :options="swiperOption" >
            <swiper-slide  v-for="(item,index) of setWriperData" :key="index">
                <div class="icon-box" v-for="(item,index) in item" :key="index">
                    <div class="icon-img-box">
                        <img :src="item.imgUrl" alt="">
                    </div>
                    <div class="icon-desc">
                        {{item.description}}
                    </div>
                </div>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'Icons',
    props: {
        iconsList: Array
    },
    data(){
        return{
            swiperOption: {
                pagination : '.swiper-pagination',
                loop: true,
                initialSlide :1
            }
        }
    },
    computed: {
        setWriperData: function(){
            const _swiperOptions = [];
            let index = 0;

            while(index < this.iconsList.length){
                _swiperOptions.push(this.iconsList.slice(index,index += 8));
            }

            return _swiperOptions;
        }
    }
}
</script>

<style lang="stylus" >
@import '../../../assets/styles/variables.styl';
@import '../../../assets/styles/mixins.styl';

    .icons-wrapper{
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        margin: .2rem 0;
    }

    .icons-wrapper .icon-box{
        position: relative;
        float: left;
        width: 25%;
        height: 0;
        padding-bottom: 25%;
    }

    .icons-wrapper .icon-box .icon-img-box{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: .60rem;
    }

    .icons-wrapper .icon-box .icon-img-box img{
        display: block;
        height: 100%;
        margin: 0 auto;
    }

    .icons-wrapper .icon-box .icon-desc{
        position: absolute;
        bottom: 0;
        left:0;
        right: 0;
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        color:  $darkTxtColor;
        ellipsis();
    }
</style>